import { Code, Copy, CheckCircle } from 'lucide-react';
import { useLanguage } from '@kernelproxy/i18n';
import { useState, useEffect } from 'react';
import hljs from 'highlight.js/lib/core';
import python from 'highlight.js/lib/languages/python';
import javascript from 'highlight.js/lib/languages/javascript';
import bash from 'highlight.js/lib/languages/bash';

// Register languages
hljs.registerLanguage('python', python);
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('bash', bash);

const APIDocs = () => {
  const { language } = useLanguage();
  const [copied, setCopied] = useState<string | null>(null);

  useEffect(() => {
    // Highlight all code blocks on mount and when content changes
    hljs.highlightAll();
  }, []);

  const copyToClipboard = (text: string, id: string) => {
    navigator.clipboard.writeText(text);
    setCopied(id);
    setTimeout(() => setCopied(null), 2000);
  };

  const pythonExample = `import requests

# Configure proxy
proxy = {
    'http': 'http://username:password@gate.kernelproxy.com:8080',
    'https': 'https://username:password@gate.kernelproxy.com:8080'
}

# Make request
response = requests.get('https://api.example.com', proxies=proxy)
print(response.text)`;

  const jsExample = `const axios = require('axios');

// Configure proxy
const proxy = {
  host: 'gate.kernelproxy.com',
  port: 8080,
  auth: {
    username: 'your_username',
    password: 'your_password'
  }
};

// Make request
axios.get('https://api.example.com', { proxy })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));`;

  const curlExample = `curl -x http://username:password@gate.kernelproxy.com:8080 https://api.example.com`;

  return (
    <div className="space-y-6">
      {/* Syntax Highlighting Styles */}
      <style>{`
        /* Light mode syntax highlighting */
        .bg-gray-100 code.hljs {
          background: transparent;
        }
        .bg-gray-100 .hljs-keyword { color: #d73a49; font-weight: 600; }
        .bg-gray-100 .hljs-string { color: #032f62; }
        .bg-gray-100 .hljs-comment { color: #6a737d; font-style: italic; }
        .bg-gray-100 .hljs-number { color: #005cc5; }
        .bg-gray-100 .hljs-title { color: #6f42c1; }
        .bg-gray-100 .hljs-function { color: #6f42c1; }
        .bg-gray-100 .hljs-params { color: #24292e; }
        .bg-gray-100 .hljs-attr { color: #005cc5; }
        .bg-gray-100 .hljs-built_in { color: #005cc5; }
        .bg-gray-100 .hljs-variable { color: #e36209; }
        .bg-gray-100 .hljs-property { color: #005cc5; }
        .bg-gray-100 .hljs-literal { color: #005cc5; }
        .bg-gray-100 code { color: #24292e; }

        /* Dark mode syntax highlighting */
        .dark .dark\\:bg-gray-900 code.hljs {
          background: transparent;
        }
        .dark .dark\\:bg-gray-900 .hljs-keyword { color: #ff7b72; font-weight: 600; }
        .dark .dark\\:bg-gray-900 .hljs-string { color: #a5d6ff; }
        .dark .dark\\:bg-gray-900 .hljs-comment { color: #8b949e; font-style: italic; }
        .dark .dark\\:bg-gray-900 .hljs-number { color: #79c0ff; }
        .dark .dark\\:bg-gray-900 .hljs-title { color: #d2a8ff; }
        .dark .dark\\:bg-gray-900 .hljs-function { color: #d2a8ff; }
        .dark .dark\\:bg-gray-900 .hljs-params { color: #c9d1d9; }
        .dark .dark\\:bg-gray-900 .hljs-attr { color: #79c0ff; }
        .dark .dark\\:bg-gray-900 .hljs-built_in { color: #79c0ff; }
        .dark .dark\\:bg-gray-900 .hljs-variable { color: #ffa657; }
        .dark .dark\\:bg-gray-900 .hljs-property { color: #79c0ff; }
        .dark .dark\\:bg-gray-900 .hljs-literal { color: #79c0ff; }
        .dark .dark\\:bg-gray-900 code { color: #c9d1d9; }
      `}</style>

      <div>
        <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
          {language === 'zh-CN' ? 'API 集成文档' : 'API Integration Documentation'}
        </h1>
        <p className="text-gray-600 dark:text-gray-400 mt-2">
          {language === 'zh-CN' ? '使用我们的API集成代理服务' : 'Integrate our proxy services using API'}
        </p>
      </div>

      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
          {language === 'zh-CN' ? '认证信息' : 'Authentication'}
        </h2>
        <div className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
              <p className="text-sm text-gray-600 dark:text-gray-400 mb-1">{language === 'zh-CN' ? '用户名' : 'Username'}</p>
              <p className="font-mono text-gray-900 dark:text-white">your_username</p>
            </div>
            <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
              <p className="text-sm text-gray-600 dark:text-gray-400 mb-1">{language === 'zh-CN' ? 'API密钥' : 'API Key'}</p>
              <p className="font-mono text-gray-900 dark:text-white">sk_xxxxxxxxxxxx</p>
            </div>
          </div>
          <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
            <p className="text-sm text-gray-600 dark:text-gray-400 mb-1">{language === 'zh-CN' ? '代理网关' : 'Proxy Gateway'}</p>
            <p className="font-mono text-gray-900 dark:text-white">gate.kernelproxy.com:8080</p>
          </div>
        </div>
      </div>

      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <div className="flex items-center space-x-2 mb-4">
          <Code className="w-5 h-5 text-blue-600 dark:text-blue-400" />
          <h2 className="text-xl font-bold text-gray-900 dark:text-white">
            {language === 'zh-CN' ? '代码示例' : 'Code Examples'}
          </h2>
        </div>

        <div className="space-y-6">
          {/* Python Example */}
          <div>
            <div className="flex items-center justify-between mb-2">
              <h3 className="text-lg font-medium text-gray-900 dark:text-white">Python</h3>
              <button
                onClick={() => copyToClipboard(pythonExample, 'python')}
                className="flex items-center space-x-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
              >
                {copied === 'python' ? (
                  <>
                    <CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400" />
                    <span className="text-sm text-green-600 dark:text-green-400">{language === 'zh-CN' ? '已复制' : 'Copied'}</span>
                  </>
                ) : (
                  <>
                    <Copy className="w-4 h-4 text-gray-700 dark:text-gray-300" />
                    <span className="text-sm text-gray-700 dark:text-gray-300">{language === 'zh-CN' ? '复制' : 'Copy'}</span>
                  </>
                )}
              </button>
            </div>
            <pre className="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto">
              <code className="language-python text-sm">{pythonExample}</code>
            </pre>
          </div>

          {/* JavaScript Example */}
          <div>
            <div className="flex items-center justify-between mb-2">
              <h3 className="text-lg font-medium text-gray-900 dark:text-white">JavaScript (Node.js)</h3>
              <button
                onClick={() => copyToClipboard(jsExample, 'javascript')}
                className="flex items-center space-x-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
              >
                {copied === 'javascript' ? (
                  <>
                    <CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400" />
                    <span className="text-sm text-green-600 dark:text-green-400">{language === 'zh-CN' ? '已复制' : 'Copied'}</span>
                  </>
                ) : (
                  <>
                    <Copy className="w-4 h-4 text-gray-700 dark:text-gray-300" />
                    <span className="text-sm text-gray-700 dark:text-gray-300">{language === 'zh-CN' ? '复制' : 'Copy'}</span>
                  </>
                )}
              </button>
            </div>
            <pre className="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto">
              <code className="language-javascript text-sm">{jsExample}</code>
            </pre>
          </div>

          {/* cURL Example */}
          <div>
            <div className="flex items-center justify-between mb-2">
              <h3 className="text-lg font-medium text-gray-900 dark:text-white">cURL</h3>
              <button
                onClick={() => copyToClipboard(curlExample, 'curl')}
                className="flex items-center space-x-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
              >
                {copied === 'curl' ? (
                  <>
                    <CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400" />
                    <span className="text-sm text-green-600 dark:text-green-400">{language === 'zh-CN' ? '已复制' : 'Copied'}</span>
                  </>
                ) : (
                  <>
                    <Copy className="w-4 h-4 text-gray-700 dark:text-gray-300" />
                    <span className="text-sm text-gray-700 dark:text-gray-300">{language === 'zh-CN' ? '复制' : 'Copy'}</span>
                  </>
                )}
              </button>
            </div>
            <pre className="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto">
              <code className="language-bash text-sm">{curlExample}</code>
            </pre>
          </div>
        </div>
      </div>

      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
          {language === 'zh-CN' ? 'API端点' : 'API Endpoints'}
        </h2>
        <div className="space-y-3">
          {[
            { method: 'GET', endpoint: '/api/v1/proxies', description: language === 'zh-CN' ? '获取代理列表' : 'Get proxy list' },
            { method: 'GET', endpoint: '/api/v1/usage', description: language === 'zh-CN' ? '获取使用统计' : 'Get usage statistics' },
            { method: 'POST', endpoint: '/api/v1/proxies/rotate', description: language === 'zh-CN' ? '轮换代理' : 'Rotate proxy' },
          ].map((endpoint, i) => (
            <div key={i} className="flex items-center space-x-4 p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
              <span className={`px-2 py-1 rounded text-xs font-medium ${
                endpoint.method === 'GET' ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-400' : 
                'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400'
              }`}>
                {endpoint.method}
              </span>
              <span className="font-mono text-sm text-gray-900 dark:text-white flex-1">{endpoint.endpoint}</span>
              <span className="text-sm text-gray-600 dark:text-gray-400">{endpoint.description}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default APIDocs;
